<template>
	<div class="app-container">
		<el-form ref="form" :model="queryParams" :inline="true" size="small" v-show="showSearch">
			<el-form-item label="医生姓名">
				<el-input v-model="queryParams.doctorName" placeholder="医生姓名" clearable></el-input>
			</el-form-item>
			<el-form-item label="医生职称">
				<el-input v-model="queryParams.title" placeholder="医生职称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
				<el-button type="default" @click="reset" icon="el-icon-refresh">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="success" size="mini" icon="el-icon-check"
						   @click="passExamine(true)" :disabled="multipleSelection.length == 0">一键通过</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" size="mini" icon="el-icon-close"
						   @click="passExamine(false)" :disabled="multipleSelection.length == 0">一键拒绝</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getDoctorList"></right-toolbar>
		</el-row>
		<el-table :data="tableData" stripe style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
			<el-table-column type="selection"></el-table-column>
			<el-table-column type="index" label="序号" width="80" :index="indexMethod"></el-table-column>
			<el-table-column prop="doctorName" label="医生姓名" width="100"></el-table-column>
			<el-table-column label="医生职称">
				<template slot-scope="scope">{{scope.row.title | titleFilter}}</template>
			</el-table-column>
			<el-table-column prop="idCardFront" label="工牌照">
				<template slot-scope="scope">
					<el-image class="image" :src="ossUrl + scope.row.badge" :preview-src-list="[ossUrl + scope.row.badge]">
						<div slot="error" class="image-slot">
							未上传
						</div>
					</el-image>
				</template>
			</el-table-column>
			<el-table-column prop="idCardBack" label="医师执业证书">
				<template slot-scope="scope">
					<el-image class="image" :src="ossUrl + scope.row.certificate" :preview-src-list="[ossUrl + scope.row.certificate]">
						<div slot="error" class="image-slot">
							未上传
						</div>
					</el-image>
				</template>
			</el-table-column>
			<el-table-column prop="credentials" label="红/白/蓝底证件照">
				<template slot-scope="scope">
					<el-image class="image" :src="ossUrl + scope.row.credentials" :preview-src-list="[ossUrl + scope.row.credentials]">
						<div slot="error" class="image-slot">
							未上传
						</div>
					</el-image>
				</template>
			</el-table-column>
			<el-table-column prop="goodSkill" label="擅长领域" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="briefIntroduction" label="医生简介" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column label="职业经历" :show-overflow-tooltip="true">
				<template slot-scope="scope">
				    {{scope.row.briefExperience == "undefined" ? "": scope.row.briefExperience}}
				</template>
		    </el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row.doctorId, true)" type="text" size="small">通过</el-button>
					<el-button @click="handleClick(scope.row.doctorId, false)" type="text" size="small">不通过</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDoctorList" />
	</div>
</template>

<script>
import {GetDoctorList, EditDoctor, updateAuditStatusByIds} from '@/api/doctor'

export default {
	data() {
		return {
			tableData: [],
			total: 0,
			loading: false,
			queryParams: {
				doctorName: undefined,
				title: undefined,
				auditStatus: 0,
				pageNum: 1,
				pageSize: 10,
				orderByColumn: 'create_time',
				isAsc: 'desc'
			},
			showSearch: true,
			multipleSelection: [],
			baseUrl: this.$baseUrl,
			ossUrl: this.$ossUrl
		};
	},
	mounted() {
		this.getDoctorList();
	},
	methods: {
		getDoctorList() {
			this.loading = true;
			GetDoctorList(this.queryParams).then(res => {
				this.tableData = res.rows;
				this.total = res.total;
				this.loading = false;
			})
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		handleClick(doctorId, flag) {
			this.$confirm('该操作会修改医生审核状态, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let params  = { doctorId: doctorId, auditStatus: flag ? 1: 2 }
				EditDoctor(params).then(res => {
					if(res.code == 200) {
						this.msgSuccess('您的操作已提交成功');
						this.getDoctorList();
					}
				})
			});
		},
		passExamine(flag) {
			let ids = [];
			let auditStatus = flag ? 1: 2;
			for (let i = 0; i < this.multipleSelection.length; i++) {
				ids.push(this.multipleSelection[i].doctorId);
			}
			updateAuditStatusByIds({auditStatus: auditStatus, ids: ids.join(",")}).then(res => {
				if(res.code == 200) {
					this.msgSuccess(res.msg);
					this.getDoctorList();
				}
			})
		},
		onSubmit() {
			this.getDoctorList()
		},
		reset() {
			this.queryParams.doctorName = undefined;
			this.queryParams.title = undefined;
		},
		indexMethod(index) {
			return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
		}
	},
	filters: {
		titleFilter: (text) => {
			if(text == 'zhuyuan_doctor') {
				return '住院医师';
			} else if(text == 'zhuzhi_doctor') {
				return '主治医师';
			} else if(text == 'fuzhuren_doctor') {
				return '副主任医师';
			} else if(text == 'zhuren_doctor') {
				return '主任医师';
			} else if(text == 'ys02') {
				return '主任中医师';
			} else if(text == 'ys04') {
				return '副主任中医师';
			} else if(text == 'ys06') {
				return '主治中医师';
			} else if(text == 'ys08') {
				return '住院中医师';
			} else if(text == 'ys09') {
				return '助理医师';
			} else if(text == 'ys10') {
				return '实习医师';
			} else if(text == 'ys11') {
				return '在校学生';
			} else if(text == 'ys12') {
				return '其他';
			}
			return text;
		}
	}
}
</script>

<style lang="scss" scoped>
	.image {
		width: 100px;
		height: 50px;
	}
	::v-deep .image-slot {
		height: 50px;
		line-height: 50px;
		color: #c0c4cc;
		font-size: 14px;
	}
</style>
